<template>
  <div class="page-content">
    <div class="comm-content" ref="main"></div>
  </div>
  <!-- <div class="page">
    <div class="content" ref="echarts"></div>
  </div> -->
</template>
<script>
export default {
  data() {
    return {
      myEcharts: null,
      // echarts: null,
    };
  },
  methods: {
  //   // 检测屏幕
  //   screen() {
  //     this.echarts.resize();
  //     // 获取屏幕可视宽度
  //     let width = this.$refs.main.offsetWidth;

  //     // 设置标题大小
  //     let num = (width / 100) * 3;
  //     // 设置饼状图内圆的大小
  //     let innerRadius = num * 2;

  //     // 设置饼状图外圆的大小
  //     let outerRadius = num * 2.5;
  //     let seriesRadius = [1, 2, 3, 4].map((item, index) => {
  //       return {
  //         radius: [innerRadius, outerRadius],
  //         label: {
  //           fontSize: num,
  //         },
  //       };
  //     });
  //     let options = {
  //       title: {
  //         textStyle: {
  //           fontSize: num,
  //         },
  //       },
  //       series: seriesRadius,
  //     };
  //     // 重新绘制图表
  //     this.setOption(options);
  //   },
  //   // 初始化echarts
  //   initEcharts() {
  //     let echarts = this.$refs.main;
  //     this.echarts = this.$echarts.init(echarts);
  //   },
  //   // 请求数据
  //   async getData() {
  //     let dataList = await this.$http("/api/cropAreasProportion");
  //     // console.log(dataList);
  //     let centerList = [
  //       ["20%", "50%"],
  //       ["40%", "50%"],
  //       ["60%", "50%"],
  //       ["80%", "50%"],
  //     ];
  //     let seriesData = dataList.data.map((item, index) => {
  //       return {
  //         type: "pie",
  //         center: centerList[index],
  //         radius: [50, 65],
  //         label: {
  //           show: true,
  //           position: "center",
  //           // fontSize: 25
  //         },
  //         data: [
  //           {
  //             name: item.areas + "\n" + item.zb + "%",
  //             value: item.zb,
  //           },
  //           {
  //             value: item.other,
  //           },
  //         ],
  //       };
  //     });

  //     let options = {
  //       title: {
  //         text: "主要地区农作物种植区域占比",
  //         top: 20,
  //         left: 20,
  //       },
  //       series: seriesData,
  //     };
  //     this.setOption(options);
  //   },
  //   // 绘制图标
  //   setOption(options) {
  //     // let options = {
  //     //     series: options
  //     // }
  //     this.echarts.setOption(options);
  //     // this.screen()
  //   },
  // },




    initEcharts() {
      let main = this.$refs.main;
      this.myEcharts = this.$echarts.init(main,this.themeStatus);

      /** @type EChartsOptions*/
      let options = {
        title: {
          text: "主要地区农作物种植区域占比",
        },
      };
      this.myEcharts.setOption(options);
    },
    // 屏幕适配
    screen() {
      console.log(1);
      this.myEcharts.resize(); // 检测屏幕尺寸
      let width = this.$refs.main.offsetWidth; // 获取echarts可视宽度
      let num = (width / 100) * 3; // 设置字体
      let innerRadius = num * 2; // 内圆角的值
      let outerRadius = innerRadius * 1.3; // 外圆的值
      let seriesRadius = [1, 2, 3, 4].map((item) => {
        // 四个圆在屏幕的位置
        return {
          radius: [innerRadius, outerRadius],
          label: {
            fontSize: num,
          },
        };
      });
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
        series: seriesRadius,
      };
      this.myEcharts.setOption(options);
    },
    async getData() {
      let dataList = await this.$http("/api/cropAreasProportion");
      console.log(dataList);
      let centerList = [
        ["17.5%", "50%"],
        ["37.5%", "50%"],
        ["57.5%", "50%"],
        ["77.5%", "50%"],
      ];
      let seriesData = dataList.data.map((item, index) => {
        return {
          type: "pie",
          center: centerList[index],
          radius: [50, 70],
          label: {
            show: true,
            position: "center",
            fontSize: 30,
          },
          data: [
            {
              name: item.areas + "\n" + item.zb + "%",
              value: item.zb,
            },
            {
              value: item.other,
            },
          ],
        };
      });
      let options = {
        series: seriesData,
      };
      this.setEcharts(options);
    },
    // setEcharts(seriesData) {
    //   let options = {
    //     series: seriesData,
    //   };
    //   this.myEcharts.setOption(options);
    //   this.screen();
    // },
    setEcharts(options) {
      // let options = {
      //   series: seriesData,
      // };
      this.myEcharts.setOption(options);
      this.screen();
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener("resize", this.screen);
  },




  
  // mounted() {
  //   this.initEcharts();
  //   this.getData();
  //   // 实时检测屏幕宽度
  //   window.addEventListener("resize", this.screen);
  //   this.screen();
  // },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
